<template>
	<view class="uni_box">
		<navbar title='历史交易' backgroundColor='#566FFF'>
		</navbar>
		<view class="content">
			<u-subsection :list="list" :current="current" mode='subsection' active-color='#566FFF ' inactive-color='#566FFF'></u-subsection>
			<view class="tabtwo">
				
				<view class="hlist">
					<scroll-view scroll-x="true" class="scroll-view_H">
						<view class="">
							<view class="hlisthead oneheaditem">
								<view class="item one">
									交易日期
								</view>
								<view class="item two">
									合约名称
								</view>
								<view class="item two">
									类型
								</view>
								<view class="item two">
									成交价格
								</view>
								<view class="item two">
									成交手数
								</view>
							</view>
							<view class="hlisthead hlistnav" v-for="(item,index) in 10" :key="index">
								<view class="item one">
									红枣2301
								</view>
								<view class="item two">
									4487
								</view>
								<view class="item two">
									11725
								</view>
								<view class="item two">
									50.07
								</view>
								<view class="item two">
									50.07
								</view>
							</view>
							
						</view>
						
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						name: '历史成交'
					}, 
					{
						name: '历史委托'
					}, 
					{
						name: '历史条件单'
					}
				],
				current: 0
			};
		},
		async onLoad() {
			// let {
			// 	setting
			// } = await this.$u.api.setting({
			// 	key:'agreement'
			// });
			// this.content = setting.content
			
		},
	}
</script>

<style scoped lang="scss">
  page{
  	background-color: #fff;
  }
  .content{
	  padding: 20rpx 30rpx;
	  font-size: 28rpx;
	  font-family: PingFang SC-中等, PingFang SC;
	  font-weight: normal;
	  color: #373A4D;
	  .baioti{
		  font-size: 34rpx;
		  font-family: PingFang SC-粗体, PingFang SC;
		  font-weight: bold;
		  color: #373A4D;
	  }
	  .time{
		  font-size: 24rpx;
		  font-family: PingFang SC-中等, PingFang SC;
		  font-weight: normal;
		  color: #AEB0BF;
		  display: block;
		  margin: 20rpx 0 30rpx;
	  }
	  .tabtwo{
	  	margin-top: 30rpx;
	  	.hlist{
	  		display: flex;
	  		flex-direction: column;
	  		.scroll-view_H {
	  			white-space: nowrap;
	  			width: 100%;
	  			overflow-x: auto;
	  			display: flex;
	  			flex-direction: row;
	  			position: relative;
	  		}
	  		.hlisthead:first-child{
	  			padding-top: 0;
	  		}
	  		.hlisthead{
	  			display: block;
	  			flex-direction: row;
	  			padding: 20rpx 0 20rpx;
	  			width: 100%;
	  			border-bottom: 1rpx solid #eee;
	  			.one{
	  				width: 25%;
	  			}
	  			.two{
	  				width: 25%;
	  			}
	  			.item{
	  				font-size: 26rpx;
	  				font-family: PingFang SC-中等, PingFang SC;
	  				font-weight: normal;
	  				color: #373A4D;
	  				display: inline-block;
	  				padding: 0 5rpx;
	  				text-align: center;
	  				image{
	  					width: 10rpx;
	  					height: 16rpx;
	  					margin-left: 8rpx;
	  				}
	  			}
	  		}
			.oneheaditem{
				.item{
					color: #AEB0BF;
				}
			}
	  		.hlisthead:first-child{
	  			border-bottom: none;
	  		}
	  		.hlistnav{
	  			.item{
	  				font-size: 26rpx;
	  				font-family: PingFang SC-中等, PingFang SC;
	  				font-weight: normal;
	  				color: #373A4D;
	  				display: inline-block;
	  				white-space: normal;
	  				height: 100%;
	  				vertical-align: middle;
	  				image{
	  					width: 10rpx;
	  					height: 16rpx;
	  					margin-left: 8rpx;
	  				}
	  			}
	  			.green{
	  				color: #018E18;
	  			}
	  			.red{
	  				color: #C80000;
	  			}
	  		}
	  	}
	  }
  }
</style>
